<template>
  <h2 class="title">注册公司</h2>
  <div class="company-info">
    <p class="subject">基本信息</p>

    <n-grid :cols="24" :x-gap="24" :y-gap="40">
      <n-gi :span="24">
        <p class="label">Logo</p>
        <n-upload
          action=""
          max="1"
          default-upload="false"
          :custom-request="customLogoRequest"
          list-type="image-card"
        >
          点击上传
        </n-upload>
      </n-gi>

      <n-gi :span="12">
        <p class="label">公司名称</p>
        <n-input v-model:value="companyInfo.name" placeholder="名称" />
      </n-gi>

      <n-gi :span="12">
        <p class="label">公司邮箱</p>
        <n-input
          v-model:value="companyInfo.email"
          placeholder="xxx@email.com"
        />
      </n-gi>

      <n-gi :span="12">
        <p class="label">联系电话</p>
        <n-input v-model:value="companyInfo.tel" placeholder="123 4444 5555" />
      </n-gi>

      <n-gi :span="12">
        <p class="label">公司网站</p>
        <n-input
          v-model:value="companyInfo.website"
          placeholder="www.xxx.com"
        />
      </n-gi>

      <n-gi :span="12">
        <p class="label">创办时间</p>
        <n-date-picker
          v-model:value="companyInfo.creation_date"
          type="date"
          placeholder="时间"
          clearable
        />
      </n-gi>

      <n-gi :span="12">
        <p class="label">公司规模</p>
        <n-input v-model:value="companyInfo.size" placeholder="500 - 1000" />
      </n-gi>

      <n-gi :span="24">
        <p class="label">关于公司</p>
        <tinymce ref="tiny"></tinymce>
      </n-gi>
    </n-grid>
  </div>

  <div class="company-info">
    <p class="subject">公司照片</p>
    <n-upload
      action=""
      :custom-request="customCpPhotosRequest"
      list-type="image-card"
      @preview="handlePreview"
      max="8"
    />
  </div>

  <div class="company-info">
    <p class="subject">联系地址</p>

    <n-grid :cols="24" :x-gap="24" :y-gap="40">
      <n-gi :span="24">
        <p class="label">公司地址</p>
        <n-input v-model:value="companyInfo.address" placeholder="详细地址" />
      </n-gi>
    </n-grid>
  </div>
  <n-button type="info" @click="saveCompanyInfo"> 保存信息 </n-button>
</template>

<script setup>
import { ref, reactive } from "vue"
import Tinymce from "@/components/Tinymce.vue"
// 按需引入请求接口
import { RegisterCompanyAPI } from "@/http/api/company.js"
const formRef = ref(null)
let tiny = ref(null)

const companyInfo = reactive({
  name: "",
  email: "",
  tel: "",
  website: "",
  creation_date: null,
  size: "",
  about: "",
  address: "",
})

const formData = ref(new FormData())

//图片自定义上传时间
function customLogoRequest(params) {
  formData.value.append("logo", params.file.file)
}

let cpPhotoTemp = []
function customCpPhotosRequest(params) {
  const isFileExist = cpPhotoTemp.some((photo) => {
    return params.file.name == photo.name
  })
  if (!isFileExist) {
    cpPhotoTemp.push(params.file)
  }
}

// 保存公司信息
function saveCompanyInfo() {
  // 处理数据
  companyInfo.about = tiny.value.content

  // 将表单数据存储入formData
  for (const key in companyInfo) {
    if (Object.hasOwnProperty.call(companyInfo, key)) {
      formData.value.append(key, companyInfo[key])
    }
  }

  // 将图片数据存储入formData
  cpPhotoTemp.forEach((photo) => {
    formData.value.append("cpPhotos", photo.file)
  })

  RegisterCompanyAPI(formData.value).then((res) => {
    console.log(res)
    // if (res.status) {
    //   resetField()
    // }
  })
}

function resetField() {
  tiny.value.content = "在此输入内容..."
  companyInfo.name =
    companyInfo.email =
    companyInfo.tel =
    companyInfo.website =
    companyInfo.size =
    companyInfo.about =
    companyInfo.address =
      ""
  companyInfo.creation_date = null
  cpPhotoTemp = []
  formData.value = new FormData()
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 26px;
  font-weight: bold;
}

.company-info {
  margin: 20px 0px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;

  .subject {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
  }

  .label {
    padding: 10px 0px;
  }

  .n-input {
    line-height: 3.5;
  }
}
</style>
